<template>
	<view>
		<!-- 搜索组件 -->
		<search></search>
		<!-- 分类列表 -->
		<view class="cate">
			<!-- 左侧边栏 -->
			<scroll-view class="left" scroll-y="true" :style="{height:wh}">
				<van-sidebar :active-key="activeKey">
					<van-sidebar-item :title="item.cat_name" v-for="(item,index) in categories" :key="index" @click="change(index)">
					</van-sidebar-item>
				</van-sidebar>
			</scroll-view>
			<!-- 右侧主体内容 -->
			<scroll-view class="right" scroll-y="true" :style="{height:wh}">
				<view  v-for="item in child" :key="item.cat_id">
					<view v-html="item.cat_name" style="text-align: center;"></view>
					<van-grid column-num="3">
					  <van-grid-item use-slot v-for="it in item.children" :key="it.cat_id" @click="go(it.cat_id)">
						  <image :src="it.cat_icon" mode="" style="width: 160rpx; height: 160rpx;"></image>
						  <view class="" v-html="it.cat_name"></view>
					  </van-grid-item>
					  
					</van-grid>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import search from "@/components/search.vue"
	export default {
		components: {
			search
		},
		data() {
			return {
				activeKey: 0,
				wh: 0,
				categories: [],
				child:[]
			};
		},
		onLoad() {
			this.getCate()
			var obj = wx.getSystemInfoSync()
			console.log(obj)
			this.wh = obj.windowHeight - 50 + "px"
		},
		methods: {
			async getCate() {
				let {
					data: res
				} = await uni.$http.get('/api/public/v1/categories')
				console.log(res, 'cate')
				this.categories = res.message
				this.child = res.message[0].children
			},
			//点击侧边栏切换相应内容
			change(i){
				console.log(i)
				this.child = this.categories[i].children
			},
			//点击跳转
			go(id){
				wx.navigateTo({url:"/sub/list/list?cid="+id})
			}
		},
	}
</script>

<style lang="scss">
	.cate {
		width: 750rpx;
		display: flex;

		.left {
			width: 160rpx;
		}

		.right {
			flex: 1;
		}
	}
</style>
